<template>
  <div class="article-box">
    <el-breadcrumb separator-icon="arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">⾸⻚</el-breadcrumb-item>
      <el-breadcrumb-item>⽂章管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片组件 -->
    <el-card>
      <!-- 头部区域 -->
      <template #header>
        <div class="card-header">
          <span>共 {{ total }} 条记录</span>
          <el-button
            round
            type="primary"
            @click="onOpen(ARTICLE_OPS_TYPE.add)"
          >
            <el-icon>
              <Plus />
            </el-icon>
            新增文章
          </el-button>
        </div>
      </template>
      <!-- 主体区域 -->
      <el-table
        :data="articleList"
        border
      >
        <el-table-column
          label="标题"
          width="270"
          prop="stem"
        ></el-table-column>
        <el-table-column
          label="作者"
          width="170"
          prop="creator"
        ></el-table-column>
        <el-table-column
          label="类别"
          width="120"
          prop="category"
        ></el-table-column>
        <el-table-column
          label="点赞"
          width="100"
          prop="likeCount"
          sortable
        ></el-table-column>
        <el-table-column
          label="浏览数"
          width="100"
          prop="views"
          sortable
        ></el-table-column>
        <el-table-column
          label="创建时间"
          width="250"
          prop="createdAt"
        ></el-table-column>
        <el-table-column
          label="操作"
          width=""
        >
          <template #default="{ row }">
            <el-tooltip
              placement="bottom"
              content="预览"
            >
              <el-icon
                :size="18"
                @click="onOpen(ARTICLE_OPS_TYPE.preview, row.id)"
              >
                <View />
              </el-icon>
            </el-tooltip>
            <el-tooltip
              placement="bottom"
              content="编辑"
            >
              <el-icon
                :size="18"
                @click="onOpen(ARTICLE_OPS_TYPE.modify, row.id)"
              >
                <Edit />
              </el-icon>
            </el-tooltip>
            <el-tooltip
              placement="bottom"
              content="删除"
            >
              <el-icon
                @click="delArticle(row.id)"
                :size="18"
              >
                <Delete />
              </el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部区域 -->
      <template #footer>
        <el-pagination
          background
          v-model:current-page="articleQuery.current"
          :total="total"
          :page-size="articleQuery.pageSize"
          layout="prev, pager, next"
          @current-change="getArticleList"
        ></el-pagination>
      </template>
    </el-card>
    <!-- 编辑栏 -->
    <el-drawer
      :title="activeTitle"
      direction="rtl"
      show-close
      @open="keyEdit = Date.now()"
      v-model="visible"
      size="50%"
    >
      <article-drawer
        :key="keyEdit"
        :currentType="currentType"
        :articleId="articleId"
        @close="onClose"
        @getArticleList="getArticleList"
      />
    </el-drawer>
  </div>

</template>

<script setup>
  import { getArticleListApi, delArticleApi } from '@/api/article'
  import { reactive, ref, computed } from 'vue';
  import { ARTICLE_OPS_TYPE, ARTICLE_MAP } from '@/constant/article'
  import { ElMessage, ElMessageBox } from 'element-plus';
  import ArticleDrawer from './components/ArticleDrawer.vue'
  const articleQuery = reactive({
    current: 1, // 当前页码
    pageSize: 10, // 每页数量
  })

  // 编辑栏关键字(实现重置功能)
  const keyEdit = ref()
  // 文章列表
  const articleList = ref([])
  // 文章总个数
  const total = ref(0)

  // 获取文章信息
  const getArticleList = async () => {
    try {
      const { data } = await getArticleListApi(articleQuery)
      articleList.value = data.rows
      total.value = data.total
    } catch (e) { }
  }
  // 进入页面就获取信息
  getArticleList()


  // 删除
  const delArticle = async (id) => {
    try {
      await ElMessageBox.confirm('确认删除吗', '删除', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      })
      const { message } = await delArticleApi(id)
      ElMessage.success(message)
      // 重新获取信息
      getArticleList()
    } catch (e) { }
  }


  // 编辑栏是否可见
  const visible = ref(false)
  // 当前文章操作状态
  const currentType = ref(null)
  // 文章 id
  const articleId = ref(null)
  // 计算属性获得标题
  const activeTitle = computed(() => {
    return ARTICLE_MAP[currentType.value] + "文章"
  })

  // 打开对话组件
  const onOpen = (type, id) => {
    currentType.value = type
    articleId.value = id
    visible.value = true
  }

  // 关闭对话框
  const onClose = () => {
    visible.value = false
  }
</script>

<style lang="scss" scoped>
  .article-box {
    .el-card {
      margin-top: 20px;

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
      }

      :deep(.el-card__footer) {
        margin-top: -15px;
        border-top: none;
      }

      .el-table {
        height: 50vh;

        .el-icon:nth-child(2) {
          margin: 0 15px;
        }
      }

      .el-pagination {
        display: flex;
        justify-content: center;
      }
    }
  }
</style>